<script type="text/javascript" src="../../../jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/system/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../pageoffice.js" id="po_js_main"></script>
<style>
	.file-handle{margin-top: 20px;
		padding-left: 15px;}

	.file-handle button{color: #ffffff;}

	.file-mix,.file-delete{
		margin-top: 15px;}

	.file-mix a,.file-delete a{color: #666666;
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;}

	.file-handle .box-file{height: 300px;
		border: 1px solid lightgrey;
		margin-top: 5px;}

	.file-handle .return-off,.file-handle .btn-mix{background-color: #09bc76;
		float: right;}

	.file-handle .btn-mix{margin-right: 10px;}

	.box-file .file-div{background-color: lightgrey;
		height: 40px;
		margin-top: 5px;
		line-height: 40px;
		color: #7098eb;}

	.file-data{margin-top: 10px;}

	.box-file .btn-look{background-color: #7098eb;
		margin-top: 7px;
		margin-left: 15px;
		width: 70px;}

	.box-file .btn-delete1{background-color: #f48439;
		margin-top: 7px;
		margin-left: 15px;
		width: 70px;}
</style>
<script>

    var base = "${base}";
    var project_id = $.trim($("#project_id").val());

    function showButton1(){
        var button_html = '<button class="btn btn-default btn-mix" onclick="downloadWord()">下载</button><button class="btn btn-default btn-mix" onclick="mergeWordNew()">重新合成</button><button class="btn btn-default btn-mix" onclick="mergeWord()">合成</button>';
        $("#button_b").prepend(button_html);
    }

    function preview(fileId,fileType,fileName){
        var url = "";
        if (fileType=="trzl_jgh" || fileType=="trzl_fjgh") {
            url = base+"/projectCenter/tczl/preview/"+project_id+"/"+fileId+"/"+fileType;
        } else if (fileType=="sjdy") {
            url = base+"/projectCenter/tczl/preview/"+project_id+"/"+fileId+"/"+fileType;
        } else {
            url = base+"/projectCenter/tczl/preview/"+project_id+"/"+fileId+"/"+fileType;
        }

        POBrowser.openWindowModeless(url,'width=1050px;height=900px;');
    }
    function downloadWord(){
        var url = base+"/projectCenter/tczl/exportWordData/"+$("#wjid").val()+"/"+project_id;
        window.open(url,"_self");
        return false;
    }
    function mergeWord(){
        SortingSubmission();
        var url = base+"/projectCenter/tczl/mergeWord/"+project_id+"/"+$("#wjid").val()+"/0";
        POBrowser.openWindowModeless(url,'width=1050px;height=900px;');
    }

    function mergeWordNew(){
        SortingSubmission();
        var url = base+"/projectCenter/tczl/mergeWord/"+project_id+"/"+$("#wjid").val()+"/1";
        POBrowser.openWindowModeless(url,'width=1050px;height=900px;');
    }
    //合成规则提交
    function SortingSubmission(){
        var posturl = base+"/projectCenter/tczl/saveSorting/"+project_id+"/"+$("#wjid").val();
        $.post(posturl,{"sorting":$("#sorting").val()},
            function (data,status){

            })
    };

    function backup(){
        var url = base+"/projectCenter/tczl/index/"+project_id;
        $.get(url, function(result){
           // $(".layui-show").html("");
            $("#mention_data").html(result)

        });
	}

    $(function() {
        showButton1();
        // 这是设计单元和模板及 合成
        var $gallery = $( "#from1" ),
            $trash = $( "#to1" );
        // 选取功能
        function move(that) {
            debugger
            that.fadeOut(function() {
                var $list = $( "div", $("#to1") ).length ? $( "div", $("#to1") ) : $( "<div class=\'col-sm-12 file-data\' style=\'padding-left: 5px;\'>" ).appendTo( $("#to1") );

                var sorting = $("#sorting").val();
                if (sorting.indexOf(that.find("div").eq(0).text())>=0) {
                    sorting = sorting.replace(that.find("div").eq(0).text(),"");
                    sorting = sorting.replace("、、","、");
                }
                if (sorting.endsWith("、")) {
                    sorting = sorting.substr(0,sorting.length-1);
                }
                sorting+="、"+that.find("div").eq(0).text();
                $("#sorting").val(sorting);

                that.find( "button.preview").show();
                that.find( "button.move").hide();
                that.find( "button.unmove").show();
                that.appendTo( $trash ).fadeIn(function() {
                });
            });
        }

        // 取消选取
        function unmove(that) {
            //that.find( "button.unmove").hide();
            var sorting = $("#sorting").val();
            if(sorting.indexOf(that.find("div").eq(0).text())>=0) {
                sorting = sorting.replace(that.find("div").eq(0).text(),"");
                sorting = sorting.replace("、、","、");
            }
            for (var i=0;i<5;i++) {
                if(sorting.indexOf("、、") >= 0 )
                {
                    sorting = sorting.replace("、、","、");
                }
            }
            $("#sorting").val(sorting);
            that.fadeOut(function() {
                that.find( "button.preview").show();
                that.find( "button.unmove").hide();
                that.find( "button.move").show();
                that.appendTo( $gallery).fadeIn();
            });
        }

        // 通过事件代理解决button行为
        $(".move" ).click(function( event ) {
            debugger
            var $item = $( this ).parent().parent();
            $target = $( event.target );
            if ( $target.is( "button.move" ) ) {
                move( $item );
            } else if ( $target.is( "button.unmove" ) ) {
                unmove( $item );
            }
        });

        $(".unmove" ).click(function( event ) {
            debugger
            var $item = $( this ).parent().parent();
            $target = $( event.target );
            if ( $target.is( "button.move" ) ) {
                move( $item );
            } else if ( $target.is( "button.unmove" ) ) {
                unmove( $item );
            }
        });
    });
</script>
<input type="hidden" id="sorting" value="${obj.compound_rule}">
<input type="hidden" id="wjid" value="${obj.wjid}">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	<ul class="layui-tab-title">
		<li class="layui-this">文件合成 </li>
	</ul>
	<div class="file-handle">
		<div class="col-sm-3 col-sm-offset-9" style="padding: 0;" id="button_b">

		</div>
		<div class="col-sm-12 file-mix" style="padding: 0;">
			<a href="">合成素材</a>
		</div>
		<div class="col-sm-12 box-file" data-spy="scroll" data-target="#navbar-example" data-offset="0"
			 style="height:300px;overflow-y:auto;overflow-x:hidden;position: relative;" id="to1">
			<#if(obj.list.~ size>0){#>
			<#for(file in obj.list){#>
			<#if(file.isCheck){#>
			<div class="col-sm-12 file-data" style="padding-left: 5px;;">
				<div class="col-sm-9 file-div">${file.fileName}</div>
				<div class="col-sm-3">
					<#if(file.type!="trzl_fjgh"){#>
						<button class="btn btn-default btn-look preview" onclick="preview('${file.id}','${file.type}','${file.fileName}')">预览</button>
					<#}#>
					<button class="btn btn-default btn-delete1 move" style="display:none;">选取</button>
					<button class="btn btn-default btn-delete1 unmove">取消</button>
				</div>
			</div>
			<#}#>
			<#}#>
			<#}#>
		</div>
		<div class="col-sm-12 file-delete" style="padding-left: 0;">
			<a href="">移除文件</a>
		</div>
		<div class="col-sm-12  box-file" data-spy="scroll" data-target="#navbar-example" data-offset="0"
			 style="height:300px;overflow-y:auto;overflow-x:hidden;position: relative;" id="from1">
			<#if(obj.list.~ size>0){#>
			<#for(file in obj.list){#>
			<#if(!file.isCheck){#>
				<div class="col-sm-12 file-data" style="padding-left: 5px;;">
					<div class="col-sm-9 file-div">${file.fileName}</div>
					<div class="col-sm-3">
						<#if(file.type!="trzl_fjgh"){#>
							<button class="btn btn-default btn-look preview" onclick="preview('${file.id}','${file.type}','${file.fileName}')">预览</button>
						<#}#>
						<button class="btn btn-default btn-delete1 move">选取</button>
						<button class="btn btn-default btn-delete1 unmove" style="display: none;">取消</button>
					</div>
				</div>
			<#}#>
			<#}#>
			<#}#>
		</div>
	</div>
</div>
</body>
</html>